<template>
  <div class="hv-form-property-container">
    <a-collapse v-model:activeKey="activeKey">
      <a-collapse-panel key="baseProperty" header="基本属性">
        <hv-base-props-group :compData="propData" />
      </a-collapse-panel>

      <a-collapse-panel key="styleProperty" header="样式属性">
        <div class="hv-form-data-container">
          <hv-border-style-group :compData="propData" />
          <hv-transform-group :compData="propData" />
        </div>
      </a-collapse-panel>
      <a-collapse-panel key="compOptionProperty" header="组件属性">
        <div class="hv-form-data-container">d</div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script lang="ts">
import { defineComponent, type PropType } from "vue";
import useVisualProperty from "@/visual/hooks/use-visual-property";
import type TextInputPropOptionType from "@/visual/commons/types/text-input-prop-option-type";
import type DashboardComponentType from "@/visual/commons/types/dashboard-component-type";

export default defineComponent({
  name: "TextInputProperty",
  props: {
    compData: {
      type: Object as PropType<DashboardComponentType<TextInputPropOptionType>>,
      default: () => {
        return {};
      },
    },
  },
  setup(props) {
    const { activeKey, propData } = useVisualProperty<TextInputPropOptionType>(props);

    return {
      activeKey,
      propData,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./TextInputProperty.less";
</style>
